<template>
  <el-form ref="ruleFormRef" :model="state.ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm" :size="formSize"
    status-icon>
    <el-form-item label="商品分类" prop="name">
      <el-cascader v-model="state.ruleForm.value" :options="options" @change="handleChange" />
    </el-form-item>
    <el-form-item label="商品名称" prop="desc1">
      <el-input v-model="state.ruleForm.desc" type="text" placeholder="请输入商品名称" />
    </el-form-item>
    <el-form-item label="商品简介" prop="desc2">
      <el-input v-model="state.ruleForm.textarea" :rows="2" type="textarea" placeholder="请输入商品简介(100字)" />
    </el-form-item>
    <el-form-item label="商品价格" prop="desc3">
      <el-input v-model="state.ruleForm.desc1" type="number" placeholder="请输入商品价格" />
    </el-form-item>
    <el-form-item label="商品售卖价" prop="desc4">
      <el-input v-model="state.ruleForm.desc2" type="number" placeholder="请输入商品售价" />
    </el-form-item>
    <el-form-item label="商品库存" prop="desc5">
      <el-input v-model="state.ruleForm.desc3" type="number" placeholder="请输入商品库存" />
    </el-form-item>
    <el-form-item label="商品标签" prop="desc6">
      <el-input v-model="state.ruleForm.desc4" type="text" placeholder="请输入商品小标签" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)">Create</el-button>
      <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
  export default {
    name: 'ADD',
  }
</script>
<script setup>
  import { reactive } from "vue" 
  const state = reactive({
    ruleForm:{
      value:'111',
      desc:'222',
      desc1:11,
      desc2:11,
      desc3:11,
      desc4:11,
      textarea:'222'
    }
  })
</script>

<style lang="less" scoped>

</style>